"use client"
import { Switch } from 'antd'
import { BulbOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'

export default function ThemeToggle() {
  const [dark, setDark] = useState(false)
  useEffect(() => {
    const stored = localStorage.getItem('theme')
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    const enableDark = stored ? stored === 'dark' : prefersDark
    setDark(enableDark)
    document.documentElement.classList.toggle('dark', enableDark)
  }, [])
  const onChange = (checked: boolean) => {
    setDark(checked)
    document.documentElement.classList.toggle('dark', checked)
    localStorage.setItem('theme', checked ? 'dark' : 'light')
  }
  return (
    <div className="flex items-center gap-2">
      <BulbOutlined />
      <Switch checked={dark} onChange={onChange} checkedChildren="暗" unCheckedChildren="明" />
    </div>
  )
}

